<template>
  <view>
    <customtop2 top_title="找群"></customtop2>
    <view class="search" @click="jumpPage('/pages/qun/list')">
      <view class="container2">
        <view class="search_box">
          <view class="icon"><i class="iconfont icon-sousuoxiao"></i></view>
          <view class="input"><input class="weui-input" type="text" placeholder="请输入搜索内容" disabled /></view>
        </view>
      </view>
    </view>

    <view v-if="!loading">
    	<view class="sudoku" v-if="sudoku_data.length > 0">
        <view class="container2">
          <view
            class="item"
            v-for="(item, index) in sudoku_data"
            :key="index"
            @click="item.url_open_mode == 1 ? jumpPage(item.url) : switchTab(item.url)"
          >
            <image class="img" :src="item.image" />
            <view class="txt">{{item.title}}</view>
          </view>
        </view>
      </view>

      <view class="total" v-if="qun_total_data">
        <view class="container2">
          <i class="iconfont icon-laba2"></i><span>共有{{qun_total_data.qun_count}}个微信群，{{qun_total_data.qun_number_count}}位群友期待您的加入</span>
        </view>
      </view>

      <view class="qun_list" v-if="!loading">
        <view class="container2">
          <view class="items" v-if="quns.length > 0">
            <view class="item" v-for="(item, index) in quns" :key="index">
              <view class="qrcode">
                <image class="img" :src="item.qrcode" mode="aspectFill" />
              </view>
              <view class="info">
                <view class="name">
                  <span class="tips" v-if="item.top_status == 1">置顶</span>
                  <i class="iconfont icon-weixin icon1" v-if="item.type == '个人群'"></i>
                  <i class="iconfont icon-qiyeweixin01 icon2" v-if="item.type == '企业群'"></i>
                  {{item.name}}
                </view>
                <view class="types">
                  <span class="span_item">{{item.created_at}}</span>
                  <span class="span_item">{{item.number}}人+</span>
                </view>
                <view class="types2">
                  <view class="type_item" v-for="(item_category, index_category) in item.categorys" :key="index_category">{{item_category.category_name}}</view>
                </view>
              </view>
              <view class="btn_box">
                <view class="btn" v-if="item.is_get_contact == 0" @click="getContact(item.id);">加群</view>
                <view class="btn btn1" v-if="item.is_get_contact == 1" @click="getContact(item.id);">已查看</view>
              </view>
            </view>
            <view class="uloadmore"><u-loadmore :status="loadmore_status" /></view>
          </view>
          <u-empty
            v-if="quns.length == 0"
            mode="data"
            icon="http://cdn.uviewui.com/uview/empty/data.png"
            text="暂无内容~"
          >
          </u-empty>
        </view>
      </view>

      <u-popup
        mode="center"
        round="3"
        :show="contact_popup_show"
        @close="onClose_contact_popup"
        customStyle="background-color: transparent;"
      >
        <view class="contact_popup">
          <view class="box">
            <view class="tip1">金币不足，可开通会员或获取金币</view>
            <view class="btns">
              <button class="btn btn1" @click="jumpPage('/pages/account/gold')">获取金币</button>
              <button class="btn btn2" @click="jumpPage('/pages/account/vip')">开通会员</button>
            </view>
            <view class="tip2">普通用户查看需支付 <span class="text-danger">{{config.qun.contact_gold}}</span> 金币</view>
            <view class="tip2">会员VIP用户免费查看</view>
          </view>
        </view>
      </u-popup>

      <u-popup
        :show="qrcode_popup_show"
        :round="10"
        mode="bottom"
        @close="onClose_qrcode_popup"
        :closeable="true"
      >
        <view class="qun_qrcode_popup">
          <view class="tip1">群二维码名片</view>
          <view class="qrcode_img">
            <image @click="previewImage(current_qrcode)" class="img" :src="current_qrcode" mode="aspectFill" />
          </view>
          <view class="tip2">点击放大，长按识别进群~</view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import { request } from "@/utils/http.js"
import customtop2 from "@/components/customtop2.vue"

export default {
  components: { customtop2 },

  data() {
    return {
      loading: true,
      qun_total_data: {},
      quns: [],
      loadmore_status: 'loadmore',
      loadmore_finished: false,
      params: {
        page_size: 15,
        page: 1,
      },
      current_id: 0,
      contact_popup_show: false,
      qrcode_popup_show: false,
      current_qrcode: '',
      config: {},
      sudoku_data: {},
    }
  },

  onLoad(options) {
    request.post('/common/getConfig').then(res => {
      this.config = res.data;
    })

    uni.showLoading();
    this.getSudokuData();
    this.getQunsPaginate();
  },

  onShow() {
    request.post('/common/getQunTotal').then(res => {
      this.qun_total_data = res.data;
    })
  },

  onReachBottom() {
    this.getMore();
  },

  onPullDownRefresh: function() {
    uni.showLoading()
    this.params.page = 1;
    this.getQunsPaginate();
  },

  methods: {
    getQunsPaginate: function() {
      let params = this.params;
      request.post('/qun/getQunsPaginate', params).then(res => {
        uni.stopPullDownRefresh();
        uni.hideLoading();
        this.loading = false;
        if (res.data.total == 0) return false;

        if (res.data.current_page == 1) {
          this.quns = res.data.data;
        } else {
          this.quns = this.quns.concat(res.data.data);
        }

        if (this.params.page == res.data.last_page) {
          this.loadmore_finished = true;
          this.loadmore_status = 'nomore';
          return false;
        }

        let params = this.params;
        params.page = parseInt(res.data.current_page) + parseInt(1);
        this.loadmore_status = 'loadmore';
        this.loadmore_finished = false;
        this.params = params;
      })
    },

    getMore: function() {
      if (!this.loadmore_finished) {
        this.loadmore_status = 'loading';
        this.getQunsPaginate();
      }
    },

    getSudokuData: function() {
      request.post('/common/getAdver', {code: 'h5_qun_sudoku'}).then(res => {
        if (res.data.values) {
          this.sudoku_data = res.data.values;
        }
      })
    },

    getContact: function(id) {
      this.current_id = id;
      uni.showLoading({ title: '获取中' });
      let params = {};
      params.id = id;
      request.post('/qun/getContact', params).then(res => {
        uni.hideLoading();
        this.onClose_contact_popup();

        if (res.code == 4001) {
          this.contact_popup_show = true;
          return false;
        } else if (res.code == 400) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
          return false;
        }

        this.qrcode_popup_show = true;
        this.current_qrcode = res.data;
        this.getContactAfter(id);
      })
    },

    onClose_contact_popup: function() {
      this.contact_popup_show = false;
    },

    // 查看后
    getContactAfter: function(id) {
      let quns = this.quns;
      if (!quns.length > 0) return false;
      for (var i = 0; i < quns.length; i++) {
        if (quns[i].id == id) {
          quns[i].is_get_contact = 1;
        }
      }
      this.quns = quns;
    },

    onClose_qrcode_popup: function() {
      this.qrcode_popup_show = false;
    },

    previewImage: function(current) {
      let urls = [];
      urls.push(current);
      uni.previewImage({
        current: current,
        urls: urls
      })
    },

    switchTab: function(url) {
      uni.switchTab({ url: url })
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url })
    }
  }
}
</script>

<style>
@import url("qun.css");
page {
  background-color: #fff;
  padding-bottom: 30rpx;
}
.search {
  width: 100%;
  background-color: #fff;
  padding: 15px 0;
}
.search_box {
  background-color: #f7f8fa;
  color: #666;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 3px;
  padding: 0 10px;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.search_box .icon {
  margin-right: 6px;
}
.search_box .input {
  flex: 1;
}

.sudoku {
  background-color: #fff;
  color: #666;
}
.sudoku .container2 {
  display: flex;
  flex-wrap: wrap;
  padding: 15rpx 0 0 0;
}
.sudoku .item {
  width: 25%;
  text-align: center;
  margin-bottom: 30rpx;
}
.sudoku .item image {
  width: 80rpx;
  height: 80rpx;
}

.total {
  font-size: 12px;
  color: #999;
  padding: 20rpx 0;
  border-top: 1px solid #f9f9f9;
  border-bottom: 1px solid #f9f9f9;
}
.total i {
  margin-right: 6px;
  color: #fd7e14;
}
</style>
